<template>
	<view v-if="loading || error" class="loading_view">
		<u-loading mode="circle" v-if="loading" size="50"></u-loading>
		<u-toast ref="uToast" />
		<view v-if="error"><image class="icon" src="../../static/image/empty-image-error.png"></image> </view>
		<view class="messgae">{{ loading?'加载中...':'加载失败' }}</view>
	</view>
	<view v-else style="background-color: #EFEFEF;height: 100vh;overflow: auto;">
		<u-toast ref="uToast" />
		<view id="coupons_box">
			
			<view class="coupons_item">
				<view class="name">{{ data.c_name }}</view>
				<view class="info">
					<view class="describe">详细规则</view>
					<view class="describe"><text>·</text>凭券可享受减{{ data.c_money }}元优惠</view>
					<view class="describe"><text>·</text>有效期至{{ $u.timeFormat(data.c_endTime, 'yyyy年mm月dd日 hh:MM') }}</view>
					<view class="describe"><text>·</text>可与其他优惠活动同享</view>
					<view class="describe"><text>·</text>每次只能使用一张</view>
					<view class="describe"><text>·</text>使用条件：满{{ data.c_above_money }}元可用</view>
					<view class="describe"><text>·</text>最终解释权归建美家缘拥有</view>
				</view>
			</view>
			
		</view>
		
		<view class="butt_view" @click="use">{{ sub_status?'领取中...':'领取优惠券' }}</view>
	</view>
</template>

<script>
	export default {
		data(){
			return {
				data:{},
				loading:false,
				error:false,
				time:0,
				id:null,
				sub_status:false
			}
		},
		methods:{
			use(){
				if(this.sub_status){
					return false
				}
				this.sub_status = true
				
				let that = this
				
				this.$request({
					url:'/coupons/use',
					data:{id:this.id},
					method:'post',
					success(res){
						if(res.statusCode==200){
							if(res.data.code==1){
								that.$refs.uToast.show({
									title: '领取成功',
									type: 'success'
								})
							}else{
								that.$refs.uToast.show({
									title: res.data.msg,
									type: 'warning'
								})
							}
						}else{
							that.$refs.uToast.show({
								title: '网络繁忙',
								type: 'warning'
							})
						}
					},
					fail(err){
						that.$refs.uToast.show({
							title: '请求失败',
							type: 'warning'
						})
					},
					complete(){
						that.sub_status = false
					}
				})
			},
			getData(){
				
				if(this.loading){
					return false
				}
				
				this.loading = true
				
				this.error = false
				
				let that = this
				
				this.$request({
					url:'/coupons/details',
					data:{id:this.id},
					method:'post',
					success(res){
						if(res.statusCode==200){
							if(res.data.code==1){
								that.data = res.data.data.data
								
								that.time = res.data.data.time
							}else{
								that.$refs.uToast.show({
									title: res.data.msg,
									type: 'warning'
								})
								
								that.error = true
							}
						}else{
							that.$refs.uToast.show({
								title: '网络繁忙',
								type: 'warning'
							})
							
							that.error = true
						}
					},
					fail(err){
						that.error = true
						
						that.$refs.uToast.show({
							title: '加载失败',
							type: 'warning'
						})
					},
					complete(){
						that.loading = false
					}
				})
			}
		},
		onLoad(option){
			console.log(option)
			this.id = option.id
			
			this.getData()
		}
	}
</script>

<style scoped>
	#coupons_box{
		width:750rpx;
	}
	#coupons_box .coupons_item{
		width:670rpx;
		height: 460rpx;
		padding: 20rpx;
		background-color: #fff;
		margin-left: 40rpx;
		margin-top: 40rpx;
		border-radius: 20rpx;
		font-size: 26rpx;
	}
	#coupons_box .coupons_item view.name{
		font-size: 36rpx;
		margin-bottom: 20rpx;
	}
	#coupons_box .coupons_item view.info{
		color:#888888;
	}
	#coupons_box .coupons_item view.info .describe:first-child{
		margin-bottom: 30rpx;
	}
	#coupons_box .coupons_item view.info .describe{
		margin-top: 6rpx;
	}
	#coupons_box .coupons_item view.info .describe text{
		margin-right: 10rpx;
	}
	view.butt_view{
		width: 750rpx;
		height: 110rpx;
		color:#fff;
		background-color: #EA4389;
		text-align: center;
		line-height: 110rpx;
		position: fixed;
		bottom: 0;
		left: 0;
		font-size: 28rpx;
	}
	view.disabled{
		background-color: #7F7F7F;
	}
</style>
